<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>App</h1>
    <sub1 :arg1="user" @mysend="mySendCallback($event)"></sub1>
    <my-sub></my-sub>
</div>
<script>
    let albums=[
        {title:'专辑一',musics:[{
            name:'m1',duration:120
        },{
                name:'m2',duration:120
            }
            ]},

        {title:'专辑二',musics:[{
                name:'m11',duration:120
            },{
                name:'m12',duration:120
            }
            ]}

        ]

    Vue.component("sub1",{
        props:{arg1:Object},
        methods:{
            sendto(){

                this.$emit('mysend',this.$refs.un.value)
            }
        },
        template:`<div><h3>sub1</h3>
            <form action="#" @submit.prevent="sendto()">
                <input type="text" ref="un">
                <input type="submit">
            </form>
            arg1:{{arg1.uname}}
        </div>`
    })







    let Sub2=Vue.extend({
        data(){
          return {subname:"subname123"}
        },
        template:`<div><h3>{{subname}}</h3>
        </div>`
    })







    new Vue({
        el:'#app',
        data:{
            value:23,
            user:{uname:'john'}
        },
        methods:{
            mySendCallback(name){
                console.log(name)
            }
        },
        components:{"my-sub":Sub2}
    })


</script>
</body>
</html>